<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>yibiaopan</title>
	<style>
	*{
		padding:0;
		margin:0;
	}
	#main{
		width:660px;
		margin:0 auto;
	}
	#cpuuse, #memuse{
		display:inline-block;
		width:320px;
		height:320px;
	}
	#netuse{
		width:100%;
		display:block;
		height:320px;
	}
	@media screen and (max-width:700px) {
		#main{width:auto;}
		#cpuuse, #memuse{width:100%;}
	}
	</style>
</head>
<body>
	<div id="main">
		<div id="cpuuse"></div>
		<div id="memuse"></div>
		<div id="netuse"></div>
	</div>
	
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script src="echarts/echarts.js"></script>
	<script>
		require.config({
			paths: {
				echarts:'./echarts'
			}
		});
		
		require(
			['echarts', 'echarts/chart/gauge', 'echarts/chart/line'],
			function(ec){
				var memChart = ec.init(document.getElementById('memuse'));
				var cpuChart = ec.init(document.getElementById('cpuuse'));
				var netChart = ec.init(document.getElementById('netuse'));
				var option = {
					tooltip : {
						formatter: "{a} <br/>{b} : {c}%"
					},
					series : [
						{
							name:'Mem Useage',
							type:'gauge',
							center : ['50%', '50%'],    // 默认全局居中
							radius : [0, '75%'],
							startAngle: 140,
							endAngle : -140,
							min: 0,                     // 最小值
							max: 100,                   // 最大值
							precision: 0,               // 小数精度，默认为0，无小数点
							splitNumber: 10,             // 分割段数，默认为5
							axisLine: {            // 坐标轴线
								show: true,        // 默认显示，属性show控制显示与否
								lineStyle: {       // 属性lineStyle控制线条样式
									color: [[0.3, 'lightgreen'],[0.8, 'orange'],[1, '#ff4500']], 
									width: 30
								}
							},
							axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
								show: true,
								formatter: function(v){
									switch (v+''){
										case '10': return '弱';
										case '30': return '中';
										case '80': return '高';
										default: return '';
									}
								},
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									color: '#333'
								}
							},
							pointer : {
								length : '80%',
								width : 8,
								color : 'auto'
							},
							title : {
								show : true,
								offsetCenter: ['-65%', -10],       // x, y，单位px
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									color: '#333',
									fontSize : 15
								}
							},
							detail : {
								show : true,
								backgroundColor: 'rgba(0,0,0,0)',
								borderWidth: 0,
								borderColor: '#ccc',
								width: 100,
								height: 40,
								offsetCenter: ['-60%', 10],       // x, y，单位px
								formatter:'{value}%',
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									color: 'auto',
									fontSize : 30
								}
							},
							data:[{value: 50, name: 'Mem Used'}]
						}
					]
				}
				
				var netoption = {
					title : {
						text: 'Network',
						x: 'center'
					},
					tooltip : {
						trigger: 'axis',
						formatter: function(params) {
							return params[0].name + '<br/>'
								   + params[0].seriesName + ' : ' + params[0].value + ' (KB/s)<br/>'
								   + params[1].seriesName + ' : ' + -params[1].value + ' (KB/s)';
						}
					},
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							axisLine: {onZero: false},
							data : []
						}
					],
					yAxis : [
						{
							name : '上行(KB/s)',
							type : 'value',
							max : 100 //10M
						},
						{
							name : '下行(KB/s)',
							type : 'value',
							max : 0,
							min : -100 //10M
							
						}
					],
					series : [
						{
							name:'Up',
							type:'line',
							itemStyle: {normal: {areaStyle: {type: 'default'}}},
							data:[]
						},
						{
							name:'Down',
							type:'line',
							yAxisIndex:1,
							itemStyle: {normal: {areaStyle: {type: 'default'}}},
							data: []
						}
					]
				};
				
				var cpuOption = $.extend({}, option, true);
				var pointCount = 40;
				var oldspeed = {up:0, down:0};
				timeTicket = setInterval(function (){
					$.get('api.php',{a:'all'},
						function(data){
							option.series[0].name = 'Mem Used';
							option.series[0].data[0].name = 'Mem Useage';
							option.series[0].data[0].value = ((data.mem.buffer.used/data.mem.mem.total)*100).toFixed(2) - 0;
							memChart.setOption(option, true);
							cpuOption.series[0].name = 'CPU Used';
							cpuOption.series[0].data[0].name = 'CPU Useage';
							cpuOption.series[0].data[0].value = (100.00 - parseFloat(data.cpu.cpu.id)).toFixed(2) - 0;
							cpuChart.setOption(cpuOption, true);
							var netk = checkInternetInterface(data.network.IN);
							var nowspeed = {up:parseInt(data.network.OUT[netk]), down:parseInt(data.network.IN[netk])};
							
							if(oldspeed.up!=0 && oldspeed.down!=0){
								var updata = netoption.series[0].data;
								var downdata = netoption.series[1].data;
								if(updata.length>pointCount) updata.shift();
								if(downdata.length>pointCount) downdata.shift();
								if(netoption.xAxis[0].data.length>pointCount) netoption.xAxis[0].data.shift();
								
								var speedUp = ((nowspeed.up - oldspeed.up)/1024).toFixed(2);
								var speedDown = ((nowspeed.down - oldspeed.down)/1024).toFixed(2)*-1;
								updata.push(speedUp);
								downdata.push(speedDown);
								
								//上行最大带宽动态修改
								if(netoption.yAxis[0].max < speedUp){netoption.yAxis[0].max=parseInt(speedUp)+50}
								//下行最大带宽动态修改
								if(netoption.yAxis[1].min > speedDown){netoption.yAxis[1].min=parseInt(speedDown)-50}
								
								netoption.series[0].data = updata;
								netoption.series[1].data = downdata;
								var x = new Date();
								netoption.xAxis[0].data.push(x.getHours()+':'+x.getMinutes()+':'+x.getSeconds());
								netChart.setOption(netoption, true);
							}
							oldspeed.up   = nowspeed.up;
							oldspeed.down = nowspeed.down;
						},'json'
					);
					
				},2341);
			}
		);
		
		function netpr(oriData){
			var len = oriData.length;
			while(len--) {
				oriData[len] *= -1;
			}
			return oriData;
		}
		//检测哪个是外网的网卡接口
		function checkInternetInterface(data){
			var res;
			for(k in data){
				if(res==undefined || parseInt(data[res])<parseInt(data[k])){
					res = k;
				}
			}
			return res;
		}
		
	</script>
</body>
</html>